/**
* 直接添加 border-1px 即可实现移动设备1像素边框
* 一、基础使用方法：
* 1. 添加 border-1px 作为基础类名
* 2. 全边框：.self-class::before{ border: 1px solid self-color }
*    上边框：.self-class::before{ border-top: 1px solid self-color }
*    下边框：.self-class::before{ border-bottom: 1px solid self-color }
*    左边框：.self-class::before{ border-left: 1px solid self-color }
*    右边框：.self-class::before{ border-right: 1px solid self-color }
* 二、自定义圆角
*    文件中 bd-radius-25为示例，可自定义圆角大小，如需多种圆角，可按如下示例新增。
*    .bd-radius-num{
*        .bd-raduis(1, numpx)
*    }
*    @media screen and (-webkit-min-device-pixel-ratio: 2) {
*        .bd-radius-num{
*            .bd-raduis(2, numpx)
*        }
*    }
*    @media screen and (-webkit-min-device-pixel-ratio: 3) {
*        .bd-radius-num{
*            .bd-raduis(3, numpx)
*        }
*    }
*/
.border-1px(@dpr) {
    &::before {
        width: 100% * @dpr;
        height: 100% * @dpr;
        transform: scale(1 / @dpr);
    }
}
.border-1px {
    .border-1px(1);
    position: relative;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-width: 1px;
        border-color: #fff;
        border-style: solid;
        transform-origin: 0 0;
        pointer-events: none;
    }
}
.bd-raduis(@dpr, @radius) {
    &::before {
        border-radius: @radius * @dpr;
    }
}
.bd-radius-25{
    .bd-raduis(1, 25px)
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px {
        .border-1px(2);
    }
    .bd-radius-25{
        .bd-raduis(2, 25px)
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-1px {
        .border-1px(3);
    }
    .bd-radius-25{
        .bd-raduis(3, 25px)
    }
}
